<template>
    <div>
        <div>
            <Row>
                <Col span="4">
                    <Form :label-width="80">
                        <FormItem label="接口名称" prop="name">
                            <Input class="ipt" placeholder="接口名称" v-model="request.name"/>
                        </FormItem>
                    </Form>
                </Col>
                <Col span="4">
                    <Form :label-width="80">
                        <FormItem label="接口描述" prop="name">
                            <Input class="ipt" placeholder="接口描述" v-model="request.des"/>
                        </FormItem>
                    </Form>
                </Col>
                <Col span="4">
                    <Form :label-width="80">
                        <FormItem label="接口状态" prop="name">
                            <Select class="ipt" name="type" placeholder="请选择" v-model="request.state">
                                <Option value="0">新建</Option>
                                <Option value="1">已测试</Option>
                                <Option value="2">已发布</Option>
                                <Option value="3">取消发布</Option>
                            </Select>
                        </FormItem>
                    </Form>
                </Col>
                <Col span="4">
                    <Form :label-width="80">
                        <FormItem label="请求方式" prop="method">
                            <Select class="ipt" name="type" placeholder="请选择" v-model="request.method">
                                <Option value="GET">GET</Option>
                                <Option value="POST">POST</Option>
                                <Option value="PUT">PUT</Option>
                                <Option value="DELETE">DELETE</Option>
                            </Select>
                        </FormItem>
                    </Form>
                </Col>
                <Col span="4">
                    <Button type="primary" style="margin-left: 5px;" @click="getData">搜索</Button>
                    <Button type="success" style="margin-left: 5px" shape="circle" class="add" icon="plus-round"
                            v-has="this.$res.codeAdd" to="/core/addApi">添加
                    </Button>
                </Col>
            </Row>
        </div>
        <Table :columns="columns" :data="data1" class="table" stripe ref="myTable">
            <template v-slot:operate="row">
                <Button type="success" size="small" style="margin-right: 5px" v-has="vm.$res.apiUpdate"
                        @click="change(row)">编辑
                </Button>
                <Button type="info" size="small" style="margin-right: 5px" v-has="vm.$res.apiUpdate"
                        @click="update(row)">{{ row.state === 2 ? '取消发布' : '发布' }}
                </Button>
                <Button type="error" size="small" style="margin-right: 5px" v-has="vm.$res.apiDelete"
                        @click="remove(row.id)">删除
                </Button>

            </template>
        </Table>
        <div style="text-align: right;margin: 5px">
            <Page :total="request.total" @on-change="pageChange" @on-page-size-change="sizeChange" show-elevator
                  show-sizer
                  :page-size="request.pageSize"
                  show-total size="small"/>
        </div>
    </div>
</template>

<script>
export default {
    name: "apiList",
    metaInfo: {
        title: '接口列表',
    },
    data() {
        return {
            columns: [

                {title: '编号', key: 'id', align: 'center', width: '80px'},
                {title: '接口名称', key: 'name', align: 'center'},
                {title: '接口地址', key: 'url', align: 'center'},
                {title: '方式', key: 'method', align: 'center'},
                {
                    title: '类型', key: 'type', align: 'center', render: (h, params) => {
                        let x = params.row.type === 0 ? '自动' : (params.row.type === 1 ? '对象' : '集合');
                        return h("span", x)
                    }
                },
                {
                    title: '状态', key: 'state', align: 'center', render: (h, params) => {
                        let state = params.row.state
                        let res = state === 0 ? '新建' : state === 1 ? '已测试' : state === 2 ? "已发布" : '取消发布'
                        return h('span', res)
                    }
                },
                {title: '描述', key: 'des', align: 'center'},
                {title: '修改时间', key: 'updateTime', align: 'center'},
                {
                    title: '操作', key: 'operate', align: 'center', width: '250px', render: (h, params) => {
                        return h('div', this.$refs.myTable.$scopedSlots.operate(params.row))
                    }
                },
            ],
            // 数据类
            data1: [],
            vm: this,
            request: {
                total: 0, // 总数据大小
                pageSize: 10, // 页码大小
                page: 1,
                name: '', // 接口管理
                des: '',//  描述
                state: '',// 状态
                method: '',//  请求方式
            }
        }
    },
    mounted: function () {
        this.getData()
    }
    ,
    methods: {
        // 修改当前页码
        pageChange: function (val) {
            this.request.page = val
            this.getData()
        }
        ,
        // 修改页码大小
        sizeChange: function (val) {
            this.request.pageSize = val
            this.getData()
        }
        ,
        // 获取数据
        getData: function () {
            this.$kit.ajaxGet(this.$res.apiList, this.request, (res) => {
                this.data1 = res.data.data.data
                this.request.total = res.data.data.totalSize
            }, this)
        },
        change: function (row) {
            sessionStorage.setItem("apiInfo", JSON.stringify(row))
            this.$router.push({path: '/core/addApi'})
        },
        update: function (row) {
            let state = 2;
            let msg = "发布"
            if (row.state === 2) {
                state = 3;
                msg = "取消发布"
            }
            this.$Modal.confirm({
                title: msg,
                content: '<p>' + msg + '该接口吗？</p>',
                onOk: () => {
                    this.$kit.ajaxPut(this.$res.apiUpdate, {"id": row.id, state: state}, (res => {
                        this.$Message.success(res.data.msg)
                        this.getData();
                    }), this)
                },
                onCancel: () => {
                    this.$Message.info('取消操作')
                }
            })


        },
        remove: function (id) {
            let param = {msg: "接口", id: id, permissionId: this.$res.apiDelete}
            this.$emit("remove", param, () => {
                this.getData();
            })
        }

    }
}
</script>

<style scoped>

</style>
